<template>
  <div>
    <div style="margin-bottom: 15px">
      <el-input placeholder="请输入活动名称" style="width: 200px" v-model="input" clearable></el-input>
      <el-button type="warning" style="margin-left: 10px" @click="findBySearch()">查询</el-button>
      <el-button type="primary" style="margin-left: 10px" @click="add()">新增</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <!-- <el-table-column prop="ruaNumber" sortable label="软约期数" width="200"></el-table-column> -->
        <el-table-column prop="ruaName" label="活动名称" width="220"></el-table-column>
        <el-table-column prop="ruaSubject" label="活动主题" width="200"></el-table-column>
        <el-table-column prop="ruaAddress" label="活动地点" width="220"></el-table-column>
        <el-table-column prop="ruaDepartment" label="举办部门" width="200"></el-table-column>
        <el-table-column prop="ruaState" label="活动状态" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.ruaState === 0">未开始</span>
            <span v-else-if="scope.row.ruaState === 1">进行中</span>
            <span v-else-if="scope.row.ruaState === 2">已结束</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
        <el-table-column prop="ruaTime" label="活动时间" sortable width="250"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="$router.push({path: `/match/${scope.row.id}`} )">查看选手</el-button>
<!--            <el-button type="primary" @click="$router.push('/match')">查看选手</el-button>-->
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.id)">
              <el-button slot="reference" type="danger" style="margin-left: 5px">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-left: 50%; margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </div>
    <div>
      <!-- Form -->
      <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="40%"> <!-- 增加对话框宽度 -->
        <el-form :model="form" ref="formRef" label-width="15%" :rules="rules" :inline-message="true"
          style="padding: 20px;">
          <!-- <el-form-item label="软约期数" prop="ruaNumber">
            <el-input v-model="form.ruaNumber" placeholder="请输入软约期数" autocomplete="off" style="width: 80%"></el-input>
          </el-form-item> -->
          <el-form-item label="活动名称" prop="ruaName">
            <el-input v-model="form.ruaName" autocomplete="off" placeholder="请输入活动名称" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="活动主题" prop="ruaSubject">
            <el-input v-model="form.ruaSubject" autocomplete="off" placeholder="请输入活动主题" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="活动地点" prop="ruaAddress">
            <el-input v-model="form.ruaAddress" autocomplete="off" placeholder="请输入活动地点" style="width: 80%"></el-input>
          </el-form-item>
          <!-- <el-form-item label="活动地点" prop="ruaAddress">
            <el-select v-model="form.ruaAddress" placeholder="请选择地点" style="width: 80%">
              <el-option label="天空书院205" value="天空书院205"></el-option>
              <el-option label="双创路演大厅" value="双创路演大厅"></el-option>
              <el-option label="六度空间黑匣子剧场" value="六度空间黑匣子剧场"></el-option>
              <el-option label="六度空间无限剧场" value="六度空间无限剧场"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="举办部门" prop="ruaDepartment">
            <el-select v-model="form.ruaDepartment" placeholder="请选择部门" style="width: 80%">
              <el-option label="星屹一部" value="星屹一部"></el-option>
              <el-option label="晨曦二部" value="晨曦二部"></el-option>
              <el-option label="绪风三部" value="绪风三部"></el-option>
              <el-option label="磐创四部" value="磐创四部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" prop="ruaTime">
              <el-date-picker v-model="form.ruaTime" type="datetime" placeholder="选择日期时间" style="width: 80%;" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="活动状态" prop="ruaState">
            <el-radio v-model="form.ruaState" label="0">未开始</el-radio>
            <el-radio v-model="form.ruaState" label="1">进行中</el-radio>
            <el-radio v-model="form.ruaState" label="2">已结束</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Ruanyuescore",
  data() {
    return {
      input: '',
      currentPage4: 1,
      pageSize: 10, // 添加 pageSize 属性
      tableData: [],
      dialogFormVisible: false,
      form: {
        // ruaNumber: '',
        ruaName: '',
        ruaSubject: '',
        ruaAddress: '',
        ruaDepartment: '',
        ruaTime: '',
        ruaState: '0',
      },
      total: 0, // 添加 total 属性
      rules: {
        
        ruaName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        ruaSubject: [
          { required: false, message: '请输入活动主题', trigger: 'change' }
        ],
        ruaAddress: [
          { required: true, message: '请输入活动地点', trigger: 'blur' }
        ],
        ruaDepartment: [
          { required: false, message: '请选择举办部门', trigger: 'change' }
        ],
        ruaTime: [
          { required: true, message: '请选择活动时间', trigger: 'blur' }
        ],
        ruaState: [
          { required: false, message: '请选择软约状态', trigger: 'change' }
        ]
      }
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      request.get("/ruanyue/list", {
        params: { page: this.currentPage4, size: this.pageSize }
      }).then(res => {
        if (res.code === 1) {
           // 对数据进行降序排序
          res.data.sort((a, b) => new Date(b.ruaDate) - new Date(a.ruaDate));
          const start = (this.currentPage4 - 1) * this.pageSize;
          const end = start + this.pageSize;
          this.tableData = res.data.slice(start, end);  // 根据页码和每页显示的数量动态截取数据
          this.total = res.data.length; // 计算总条数
        } else {
          // 处理错误情况
        }
      });
    },
    findBySearch() {
      request.get("/ruanyue/search", {
        params: { content: this.input, page: this.currentPage4, size: this.pageSize } // 添加分页参数
      }).then(res => {
        if (res.code === 1) {
          // 对数据进行降序排序
          res.data.sort((a, b) => new Date(b.ruaDate) - new Date(a.ruaDate));
          const start = (this.currentPage4 - 1) * this.pageSize;
          const end = start + this.pageSize;
          this.tableData = res.data.slice(start, end);  // 根据页码和每页显示的数量动态截取数据
          this.total = res.data.length; // 计算总条数
        } else {
          this.$message({
            message: "查询失败",
            type: 'error'
          });
        }
      });
    },
    add() {
      this.form = {
        ruaNumber: '',
        ruaName: '',
        ruaSubject: '',
        ruaAddress: '',
        ruaDepartment: '',
        ruaTime: '', // 确保包含 ruaTime 字段
        ruaState: '0', // 确保初始值为 '0'
      }; 
      this.dialogFormVisible = true;// 新增数据的时候清空数据
    },
    edit(obj) {
      // 使用对象展开运算符避免引用问题，并确保 ruaTime 和 ruaState 的值正确
      this.form = {
        ...obj,
        ruaTime: obj.ruaTime ? new Date(obj.ruaTime) : '', // 确保 ruaTime 是 Date 对象
        ruaState: obj.ruaState.toString() // 确保 ruaState 是字符串类型
      };
      this.dialogFormVisible = true;
    },
    del(id) {
      request.delete(`/ruanyue/${id}`).then(res => {
        if (res.code === 1) {
          this.tableData = this.tableData.filter(item => item.id !== id);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      });
    },
    submit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          request.post("/ruanyue/save", this.form).then(res => {
            if (res.code === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.load();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage4 = 1; // 切换每页显示数量时，重置为第一页
      this.load();
    },
    handleCurrentChange(val) {
      this.currentPage4 = val;
      this.load();
    },
    formatter(row, column) {
      return row.address;
    }
  }
};
</script>

<style scoped>
.el-dialog {
  border-radius: 10px;
  /* 圆角边框 */
}

.el-form {
  padding: 20px;
  /* 增加表单内边距 */
}

.el-form-item {
  margin-bottom: 20px;
  /* 增加表单项之间的间距 */
}

.el-form-item__label {
  font-weight: bold;
  /* 加粗标签文字 */
}

.el-form-item__content {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
}

.el-form-item__error {
  color: red;
  /* 统一错误提示颜色 */
  font-size: 12px;
  /* 统一错误提示字体大小 */
  line-height: 1.2;
  /* 统一错误提示行高 */
  position: absolute;
  /* 绝对定位，确保错误提示显示在表单项下方 */
  top: 100%;
  /* 确保错误提示显示在表单项下方 */
  left: 0;
  /* 左对齐 */
  padding-top: 4px;
  /* 上边距 */
}

.el-form-item.is-error .el-input__inner {
  border-color: red;
  /* 输入框错误时的边框颜色 */
}

.el-form-item.is-error .el-select .el-input__inner {
  border-color: red;
  /* 下拉选择框错误时的边框颜色 */
}
</style>